<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
  <div id="main" style="width: 600px;height:400px;"></div>
  
  <script src="../lib/echarts/echarts.min.js"></script>
  <script>
     // 基于准备好的dom，初始化echarts实例
     const myChart = echarts.init(document.getElementById('main'));
     const option = {
  title: {
    text: '薪资 Salary'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {},
  // toolbox: {
  //   show: true,
  //   feature: {
  //     dataZoom: {
  //       yAxisIndex: 'none'
  //     },
  //     dataView: { readOnly: false },
  //     magicType: { type: ['line', 'bar'] },
  //     restore: {},
  //     saveAsImage: {}
  //   }
  // },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value',
    // axisLabel: {
    //   formatter: '{value} °C'
    // }
  },
  series: [
    {
      name: '期望薪资',
      type: 'line',
      smooth: true,
      symbol: 'circle',
      data: [10, 11, 13, 11, 12, 12, 9],
      // markPoint: {
      //   data: [
      //     { type: 'max', name: 'Max' },
      //     { type: 'min', name: 'Min' }
      //   ]
      // },
      // markLine: {
      //   data: [{ type: 'average', name: 'Avg' }]
      // }
    },
    {
      name: '实际薪资',
      type: 'line',
      data: [1, -2, 2, 5, 3, 2, 0],
      smooth: true,
      symbol: 'circle',
      // markPoint: {
      //   data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }]
      // },
      // markLine: {
      //   data: [
      //     { type: 'average', name: 'Avg' },
      //     [
      //       {
      //         symbol: 'none',
      //         x: '90%',
      //         yAxis: 'max'
      //       },
      //       {
      //         symbol: 'circle',
      //         label: {
      //           position: 'start',
      //           // formatter: 'Max'
      //         },
      //         type: 'max',
      //         name: '最高点'
      //       }
      //     ]
      //   ]
      // }
    }
  ]
};
       // 使用刚指定的配置项和数据显示图表。
       myChart.setOption(option);
  </script>
</body>
</html>